<template>
    <div>
        <headers />

        <div class="container mb-30">
            <main-nav />
            <el-card class="box-card">
                <filters :typeList="typeList" :params="params" :regionData="regionData" @on-filter="handleFilter" />
                <div class="flex align-items space-between mt-30 mb-20">
                    <div class="orderBy">
                        <el-button type="danger" v-for="(item, index) in orderByList" :key="index"
                            :plain="item.val !== params.sort" @click="params.sort = item.val">{{
                            item.name }} <i :class="item.icon"></i>
                        </el-button>
                    </div>
                    <el-form>
                        <el-input placeholder="请输入搜索内容" v-model="params.title">
                            <template slot="suffix">
                                <el-button type="danger" @click="searchBx">搜索</el-button>
                            </template>
                        </el-input>
                    </el-form>
                </div>
                <div v-loading="loading">
                    <template v-if="!isEmpty">
                        <item v-for="(item, index) in bxList" :key="index" :item="item" />
                        <div class="text-center mt-20">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="params.page" :page-size="params.pagesize"
                                layout="total, prev, pager, next" :total="total">
                            </el-pagination>
                        </div>
                    </template>
                    <el-empty v-if="isEmpty" description="暂无数据"></el-empty>
                </div>
            </el-card>
        </div>
        <footers />
    </div>
</template>

<script>
import headers from "@/components/header.vue"
import footers from "@/components/footer.vue"
import mainNav from "@/components/mainNav.vue"
import filters from "./components/filters.vue"
import item from "./components/item.vue"

import { getArticleTypeList, getBeaconList, getRegion } from "@/api/apis"


export default {
    name: "biaoxun",
    components: {
        headers,
        footers,
        mainNav,
        filters,
        item
    },
    data () {
        return {
            loading: true,
            regionData: [], // 省市区列表
            orderByList: [
                {
                    val: 'desc',
                    name: '降序',
                    icon: 'el-icon-sort-down'
                },
                {
                    val: 'asc',
                    name: '升序',
                    icon: 'el-icon-sort-up'
                },
            ],
            typeList: [],
            // 搜索装备名称
            searchKey: '',
            bxList: [],
            isEmpty: false,
            total: 0, // 总条数
            params: {
                page: 1, // 当前页
                pagesize: 10, // 每页条数
                lastPage: 1, // 最后一页
                unit_cate: '', // 单位类别
                type: '',// 招标类型
                channel: '', // 渠道
                province: '', // 省份
                city: '', // 城市
                area: '', // 区域
                title: '', // 搜索关键字
                is_hot: '', // 是否热门
                time: '', // 发布时间
                sort: '', // 排序 desc asc
                price: '' // 价格区间 1000-10000
            }
        }
    },
    created () {

    },
    mounted () {
        this.getPCA();
        this.getTypeList();
        this.getBxList();
    },
    methods: {
        searchBx () {           
            this.params.page = 1; // 当前页
            this.params.pagesize = 10; // 每页条数
            this.params.unit_cate = ''; // 单位类别
            this.params.type = '';// 招标类型
            this.params.channel = ''; // 渠道
            this.params.province = ''; // 省份
            this.params.city = ''; // 城市
            this.params.area = ''; // 区域
            this.params.is_hot = ''; // 是否热门
            this.params.time = ''; // 发布时间
            this.params.sort = ''; // 排序 desc asc
            this.params.price = ''; // 价格区间 1000-10000
            this.getBxList()
        },

        handleSizeChange (val) {
            console.log(`每页 ${val} 条`)
        },
        handleCurrentChange (val) {
            this.params.page = val
            this.getBxList()
        },
        // 子组件回传数据
        handleFilter(data){
            this.params[data.field] = data.value;
        },
        // 获取标讯类别
        getTypeList(){
            let that = this;
            getArticleTypeList().then(res => {
                if (res.code === 1) {
                    //that.$message.success(res.msg)
                    that.typeList = res.data;
                } else {
                    that.$message.error(res.msg)
                }
            })
        },
        // 获取省市区列表
        getPCA(){
            getRegion().then(res => {
                if (res.code === 1) {
                    this.regionData = res.data;
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        // 获取标讯列表
        getBxList(){
            let that = this;
            that.loading = true;
            getBeaconList({
                ...that.params
            }).then(res => {
                if (res.code === 1) {
                    //that.$message.success(res.msg)
                    that.bxList = res.data.data;
                    that.total = res.data.total;
                    that.params.pagesize = Number(res.data.per_page);
                    that.params.lastPage = res.data.last_page;
                    that.isEmpty = !that.bxList.length;
                } else {
                    that.$message.error(res.msg)
                }
                that.loading = false;
            })
        },
    },
    watch: {
        // 监测 params 对象的变化
        params: {
            handler (newVal, oldVal) {
                // 当 params 变化时，调用 getBxList 方法
                this.getBxList()
            },
            // 深度观察，因为 params 是一个对象
            deep: true
        }
    },
}
</script>

<style lang="less" scoped>
.hd-title {
    text-align: center;
    margin-top: 60px;

    h3 {
        font-size: 28px;
        font-weight: 700;
        color: #2E3033;
    }

    p {
        font-size: 14px;
        color: rgba(46, 48, 51, .6);
        margin-top: 10px;
    }
}

/deep/.el-input__suffix {
    right: 0;
}
</style>